<template>
    <div class="coupon-detail">
        <div class="info-item">
            <normal-title title="基本信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">优惠劵名称</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.name || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.name" placeholder="请输入优惠劵名称"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">优惠劵类型</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.type || ''}}</span>
                        <el-select v-model="coupon.type" v-else>
                            <el-option v-for="(item, i) in typeList" :key="i" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="form-item" v-if="coupon.type == 0">
                    <span class="label">满减</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.amount || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.amount" placeholder="请输入折扣金额"></el-input>
                    </div>
                </div>
                <div class="form-item" v-if="coupon.type == 1">
                    <span class="label">折扣金额</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.discount || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.discount" placeholder="请输入折扣金额"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">优惠劵发行数量</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.num || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.num" placeholder="请输入优惠劵发行数量"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">领取开始时间</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.receiveStartTime || ''}}</span>
                        <el-date-picker
                        v-else
                        v-model="coupon.receiveStartTime"
                        type="datetime"
                        placeholder="领取开始时间"
                        align="right"
                        >
                        </el-date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">领取截止时间</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.receiveEndTime || ''}}</span>
                        <el-date-picker
                        v-else
                        v-model="coupon.receiveEndTime"
                        type="datetime"
                        placeholder="领取截止时间"
                        align="right"
                        >
                        </el-date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">开始使用时间</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.startTime || ''}}</span>
                        <el-date-picker
                        v-else
                        v-model="coupon.startTime"
                        type="datetime"
                        placeholder="领取开始时间"
                        align="right"
                        >
                        </el-date-picker>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">结束使用时间</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.endTime || ''}}</span>
                        <el-date-picker
                        v-else
                        v-model="coupon.endTime"
                        type="datetime"
                        placeholder="领取截止时间"
                        align="right"
                        >
                        </el-date-picker>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="info-item">
            <normal-title title="领取条件" border></normal-title>
            <div class="form-box">
                <div class="form-item" >
                    <span class="label">每人领取的数量</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.receiveCondition.num || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.receiveCondition.num" placeholder="请输入每人领取的数量"></el-input>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">领取消耗的积分</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.receiveCondition.integral || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.receiveCondition.integral" placeholder="请输入领取消耗的积分"></el-input>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">可领取的客户</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.receiveCondition.integral || ''}}</span>
                        <!-- <el-input type="text" v-else v-model.trim="coupon.receiveCondition.assignCompanys" placeholder="请输入领取消耗的积分"></el-input> -->
                        <choice-customer v-else></choice-customer>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">不可领取的公司</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.receiveCondition.integral || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.receiveCondition.integral" placeholder="请输入领取消耗的积分"></el-input>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">是否新客户领取</span>:
                    <div class="cont">
                         <el-radio-group v-model="coupon.receiveCondition.newUser">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-item">
            <normal-title title="使用条件" border></normal-title>
            <div class="form-box">
                <div class="form-item" >
                    <span class="label">使用订单开始金额</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.startAmount || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.useCondition.startAmount" placeholder="请输入每人领取的数量"></el-input>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">使用订单结束金额</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.endAmount || ''}}</span>
                        <el-input type="text" v-else v-model.trim="coupon.useCondition.endAmount" placeholder="请输入每人领取的数量"></el-input>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">是否活动使用</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.isOverlayUse || ''}}</span>
                         <el-radio-group v-model="coupon.useCondition.isOverlayUse">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">是否可以和其他优惠券一同使用</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.isUseCoupon || ''}}</span>
                         <el-radio-group v-model="coupon.useCondition.isUseCoupon">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">指定商品可用</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.isUseCoupon || ''}}</span>
                         
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">商品黑名单</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.isUseCoupon || ''}}</span>
                         
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">商品黑名单</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.isUseCoupon || ''}}</span>
                         
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">指定商品类目可用</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.isUseCoupon || ''}}</span>
                         
                    </div>
                </div>
                <div class="form-item" >
                    <span class="label">商品类目黑名单</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{coupon.useCondition.isUseCoupon || ''}}</span>
                         
                    </div>
                </div>
            </div>
        </div>
        <div class="control">
            <template v-if="!isEditer">
                <el-button type="primary" @click="isEditer = true" v-if="coupon.status != 2 && coupon.status != 1">编辑</el-button>
            </template>
            <template v-else>
                <el-button @click="isEditer = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </div>
    </div>
</template>
<script>
import choiceCustomer from '@/components/Choice/customer'
import {getTimes} from '@/utils'
import { mapGetters } from 'vuex'
export default {
    name: 'couponDetail',
    components: {
        choiceCustomer
    },
    data () {
        return {
            isEditer: true,
            typeList: [],
            coupon: {
                name: '',
                type: '',
                num: '',
                startTime: '',
                endTime: '',
                discount: '',
                amount: '',
                receiveStartTime: '',
                receiveEndTime: '',
                receiveCondition: {
                    num: '',
                    newUser: false,
                    integral: '',
                    assignCompanys: [],
                    blackCompanys: []
                },
                useCondition: {
                    isOverlayUse: false,
                    isUseCoupon: false,
                    endAmount: '',
                    startAmount: ''
                }
            }
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        })
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.typeList = this.enumAll.EncumCouponType || []
            if (this.$route.params.type == 1) {
                this.isEditer = false
                this.getDetail()
            } else {
                this.isEditer = true
            }
        },
        getDetail () {
            this.$loading(true)
            let param = {}
            param = {
                id: this.$route.params.id
            }
            this.$api.activity.getCouponDetail(param).then(r => {
                let data = r.data
                this.coupon = {
                    id: data.id,
                    name: data.name,
                    type: data.type+'',
                    num: data.num,
                    startTime: data.startTime && this.$normalTime(data.startTime) || '',
                    endTime:  data.endTime && this.$normalTime(data.endTime) || '',
                    discount: data.discount || '',
                    amount: data.amount || '',
                    receiveStartTime: data.receiveStartTime && this.$normalTime(data.receiveStartTime) || '',
                    receiveEndTime: data.receiveEndTime && this.$normalTime(data.receiveEndTime) || '',
                    receiveCondition: data.receiveCondition || {
                        num: '',
                        newUser: false,
                        integral: '',
                        assignCompanys: [],
                        blackCompanys: []
                    } ,
                    useCondition: data.useCondition || {
                        isOverlayUse: false,
                        isUseCoupon: false,
                        endAmount: '',
                        startAmount: ''
                    }
                }
            }).finally(() => {
                this.$loading(false)
            })
        },
        save () {
            const {coupon: {name, type, num,startTime, endTime, receiveStartTime, receiveEndTime}} = this
            if (name == '') {
                this.$message.error('请输入优惠劵名称')
                return
            }
            if (type == '') {
                this.$message.error('请选择优惠劵类型')
                return
            }
            if (startTime == '') {
                this.$message.error('请选择优惠劵生效时间')
                return
            }
            if (endTime == '') {
                this.$message.error('请输入优惠劵失效时间')
                return
            }
            if (receiveStartTime == '') {
                this.$message.error('请输入优惠劵领取开始时间')
                return
            }
            if (receiveEndTime == '') {
                this.$message.error('请输入优惠劵领取截止时间')
                return
            }
            let param = {}
            param = JSON.parse(JSON.stringify(this.coupon))
            param.startTime = getTimes(param.startTime)
            param.endTime = getTimes(param.endTime)
            param.receiveStartTime = getTimes(param.receiveStartTime)
            param.receiveEndTime = getTimes(param.receiveEndTime)
            this.$loading(true)
            this.$api.activity.addCoupon(param).then(r => {
                this.$message.success(r.message)
            }).finally(() => {
                this.$loading(false)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.coupon-detail {
    .info-item {
        width: 100%;
        background: #fff;
        margin-bottom: 16px;
        padding: 0px 10px 10px;
        .form-box {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            .form-item {
                display: flex;
                margin-top: 10px;
                min-height: 36px;
                align-items: center;
                width: 400px;
                float: left;
                &:nth-child(2n+2) {
                    width: calc(100% - 400px);
                }
                .label {
                    width: 100px;
                    text-align-last: justify;
                    font-size: 14px;
                    color: #666;
                }
                .cont {
                    flex: 1;
                    margin-left: 10px;
                    font-size: 14px;
                    .el-input {
                        width: 300px;
                    }
                    .el-select {
                        width: 300px;
                    }
                    ::v-deep.choice-customer 
                    {
                        >input {
                            border: 1px solid #ddd;
                            height: 36px;
                            width: 260px;
                            border-radius: 4px;
                            padding-left: 10px;
                            &::-webkit-input-placeholder {
                                color: #bbb;
                            }
                        }
                    }
                    
                }
                ::v-deep.cont {
                    .el-select, .el-input {
                        width: 260px;
                    }
                }
            }
        }
    }
}
</style>